<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>举牌人</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css"
    />
  </head>
  <body class="container flex flex-col justify-center items-center">
    <img src="" id="img" alt="" class="w-1/2" />
    <textarea
      type="text"
      class="w-1/2 px-4 py-2 m-2 border border-gray-300"
      placeholder="请输入举牌文字"
      id="txt"
    ></textarea>

    <button
      onclick="saveHandle()"
      class="bg-red-600 text-red-100 font-bold px-4 py-2 m-2 w-1/3"
    >
      生成
    </button>
    <script>
      function saveHandle() {
        console.log(document.getElementById("txt").value);
        fetch("/api/v1/jpr", {
          method: "POST",
          body: JSON.stringify({
            content: document.getElementById("txt").value
          }),
          headers: {
            "Content-Type": "application/json",
          }
        })
          .then((res) => res.json())
          .then((data) => {
            document.getElementById("img").src = data.info;
          });
      }
    </script>
  </body>
</html>
